<template>
	<view class="container w-100">
		<u-navbar title="优惠券选择" :autoBack="true" :placeholder="true" leftIconColor="#ffffff" :titleStyle="{color: '#ffffff'}" bgColor="#1D1D20" class="navBarHeight" />
		<view class="padding font-30">
			<view class="b-r-10 bg-white p-l-20 p-r-20 p-t-30 p-b-10 flex m-b-20 position-r" v-for="(item,index) in couponList" :key="index" @click="clickToChooese(index)">
				<view class="position-a boxChooese">
					<view class="font-24 bg-yellow font-b color-w sanjiao" v-if="item.checked">已选择</view>
				</view>
				<view class="position-a boxChooeseNoUse" v-if="item.maxMoney > totalPayMoney">
					<view class="font-24 bg-grey font-b color-w sanjiao1">不可用</view>
				</view>
				<view class="w-100">
					<view class="flex-1 flex justify-between border-box">
						<view class="line-2 font-26 font-w-600">{{ item.title }}</view>
						<view class="color-g line-2 font-24 font-w-600">消费满{{ item.maxMoney }}可用</view>
						<view class="flex justify-between">
							<view class="color-r"> 
								<text class="font-24">￥</text>
								<text class="font-b font-30">{{ item.money }}</text>
							</view>
						</view>
					</view>
					<view class="font-24 color-g m-t-10">有效期至:{{ item.outTime }}</view>
				</view>
			</view>
			<empty :show="couponList.length == 0" />
		</view>
		<view class="w-100" style="140rpx"></view>
		<view class="save" @tap="submitCoupon" v-if="couponList.length != 0"><view class="btn">确认使用</view></view>
	</view>
</template>

<script>
import { exchangeCouponList } from '@/common/api/xyc.js'
	import payMethod from '@/pages/order/components/payMethod'
	export default {
		components: {
			payMethod
		},
		data() {
			return {
				background: {
					backgroundColor: '#1D1D20',
				},
				couponList:[],
				totalPayMoney: 0,
			};
		},
		onLoad(options) {
			this.totalPayMoney = options.totalPayMoney
		},
		onShow() {
			this.getCouponList()
		},
		methods: {
			// 选择优惠券
			clickToChooese(index){
				if(this.couponList[index].maxMoney > this.totalPayMoney){
					return this.$msg('当前消费金额未达到满减金额')
				}
				let data = JSON.parse(JSON.stringify(this.couponList))
				data.forEach((item,ind) => {
					if(ind == index){
						item.checked = !item.checked
					}else{
						item.checked = false
					}
				})
				this.couponList = data
			},
			// 获取优惠券列表
			getCouponList() {
				let data = {
					pageNo: 1,
					pageSize: 100,
					status: 0,
				}
				exchangeCouponList(data).then(res => {
					if(res.code === 200){
						this.couponList = res.data || [];
						this.couponList.forEach(item => {
							item.checked = false
						})
					}
				})
			},
			// 选择优惠券
			submitCoupon(){
				let chooese = this.couponList.filter(item => item.checked)
				if(chooese.length == 0){
					return this.$msg('请选择优惠券')
				}else{
					uni.setStorageSync('selectCoupon',chooese[0])
					uni.$emit('selectCoupon', chooese[0])
					uni.navigateBack()
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		min-height: 100vh;
		background-color: #f3f3f3;
	}
	.boxChooese{
		right: 0rpx;
		top: 0rpx;
	}
	.boxChooeseNoUse{
		left: 0rpx;
		top: 0rpx;
	}
	.sanjiao{
		border-radius: 0 10rpx 0 10rpx;
		padding: 4rpx 20rpx;
	}
	.sanjiao1{
		border-radius: 10rpx 0 10rpx 0;
		padding: 4rpx 20rpx;
	}
	::v-deep uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked{
	  color:  #ECA52B !important; /* 设置文本颜色 */
	}
	::v-deep uni-checkbox .uni-checkbox-input{
		border: none;
	}
	.save {
		position: fixed;
		bottom: 0%;
		width: 100%;
		height: 120upx;
		line-height: 120upx;
		//background-color: #fff;
		.btn {
			box-shadow: 0upx 5upx 10upx rgba(0, 0, 0, 0.4);
			width: 70%;
			height: 80upx;
			line-height: 80upx;
			border-radius: 80upx;
			// background: linear-gradient(90deg,$p-color 0%,#ffffff 100%)
			background: #ECA52B;
			color: #ffffff;
			text-align: center;
			margin: 18upx auto;
			.icon {
				height: 80upx;
				color: #fff;
				font-size: 30upx;
				justify-content: center;
				align-items: center;
			}
			font-size: 30upx;
		}
	}
</style>
